<template>
    <el-dialog :visible.sync="voiceVisible" title="系统语音配置" width="80%" center @close="voiceVisible=false">
        <div style="margin: 0px auto; text-align: left;width: 80%;">
            <br />
            <!-- <span style="font-size: 25px;font-weight: bold;">系统语音配置:</span> -->
            <el-card class="box-card1" style="padding-left: 5px;margin-bottom: 5px;">
                <span style="font-weight: bold;">引用系统字段：</span>
                <el-button @click="clickBt(item)" v-for="(item, i) in fileds" :key="i">{{ item.attrName }}
                </el-button>

                <el-input class="w-50 m-2 inputSet" type="textarea" style="margin-bottom: 5px;margin-top: 10px;"
                    size="large" @blur="blurEvent" placeholder="请{姓名}到{科室}{诊室}就诊" v-model="voiceValue">
                    <template #prepend>语音配置</template>
                </el-input>
                <div style="width:100%;text-align: center;">
                    <el-button type="primary" @click="speakBt">测试语音</el-button>
                </div>
            </el-card>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="voiceVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang='ts'>
import { IDevice } from '@/api/types';
import Vue from 'vue'
import { DevicesModule } from '@/store/modules/device'

export default Vue.extend({
    props: [],
    data() {
        return {
            voiceVisible: false,
            voiceValue: "请{姓名}到{科室}{诊室}就诊",
            device: { deviceVoiceConfig: "" },
            blurIndex: 0,
            fileds: [{ attrId: 1, attrName: "科室" }, { attrId: 1, attrName: "诊室" }, { attrId: 1, attrName: "医生" }, { attrId: 1, attrName: "工位" }, { attrId: 1, attrName: "姓名" }]
        }
    },
    methods: {
        submit() {
            if (this.device.deviceVoiceConfig == this.voiceValue) {
                this.voiceVisible = false;
                return;
            }
            this.device.deviceVoiceConfig = this.voiceValue;
            DevicesModule.updateDevice(this.device as any).then((v: any) => {
                console.error(v)
                if (v >= 1) {
                    this.voiceVisible = false;
                }
            })
        },
        speakBt() {
            let speakStr = this.voiceValue;
            speakStr = speakStr.replace(/{科室}/g, "心内科").replace(/{姓名}/g, "李四").replace(/{诊室}/g, "诊室1").replace(/{号码}/g, "1号").replace(/{工号}/g, "1号")
            var utterThis = new window.SpeechSynthesisUtterance(speakStr);
            window.speechSynthesis.speak(utterThis);
        },
        showDialog(data: IDevice) {
            this.device = data;
            if (data && data.deviceVoiceConfig) {
                this.voiceValue = data.deviceVoiceConfig;
            }
            this.voiceVisible = true;

            DevicesModule.getDeviceAttrs().then((value: any) => {
                this.fileds = value;
            })
        },
        clickBt(item: any) {
            this.insertContentHandle(`{${item.attrName}}`);
        },
        blurEvent(e: any) {
            this.blurIndex = e.srcElement.selectionStart;
        },
        insertContentHandle(text: any) {
            let index = this.blurIndex;
            let str = this.voiceValue;
            let newStr = this.voiceValue;
            let arr = str.slice(0, index);
            let newArr = arr.split('');
            let endStr = str.slice(index);
            let leftA = 0;
            for (let i = 0; i < newArr.length; i++) {
                if (newArr[i] == "{") {
                    leftA++;
                } else if (newArr[i] == "}") {
                    leftA--;
                }
            }
            let endResult = "";
            if (leftA > 0) {//少了右括号//找最后一个左{ 的地方插入
                let nStr = newArr.join("");
                let index1 = nStr.lastIndexOf("{");
                let n1 = nStr.slice(0, index1);
                let n2 = nStr.slice(index);
                let newN = n1 + text + n2;
                endResult = newN + newStr.slice(index1);
                console.error("最后的值:", newN);
            } else if (leftA < 0) {//少了左括号//找最后一个左{ 的地方插入
                
            } else {
                endResult = arr + text + endStr;
            }
            this.voiceValue = endResult;
        }
    }
})


</script>

<style>

</style>

